<template>
  <div class="h-screen bg-gray-50">
    <the-navbar
      :title="title"
      :left-arrow="back"
      @click-left="$router.back()"
    />
    <img src="@/assets/background.jpg" alt="" />

    <user-info class="relative -mt-10" />

    <router-view @footer-show="showFooter"></router-view>

    <the-footer :active="footer" ref="footer" />
  </div>
</template>

<script>
import theFooter from './footer.vue'
import theNavbar from './navbar.vue'
import userInfo from './user-info.vue'

export default {
  components: { theFooter, theNavbar, userInfo },
  data() {
    return {
      title: '',
      footer: 0,
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    },
    back() {
      return this.$route.meta.nav_back
    },
  },
  created() {
    this.title = this.$route.meta.title
    this.footer = this.$route.meta.footer
  },
  methods: {
    showFooter() {
      this.$refs.footer.hidden = false
    },
  },
}
</script>

<style>
</style>